<template>
  <div class="container" :style="`width: 100%; height: 99vh; background: url('/8.gif') no-repeat center center; background-size: cover;`" >
    <!-- 添加大标题 -->
    <h1 class="main-title">智慧农业大棚实时监测大屏</h1>

    <div class="card">
      <h2 class="title">{{ isLogin ? '登录' : '注册' }}</h2>

      <form @submit.prevent="handleSubmit">
        <div class="input-group">
          <label for="username">用户名</label>
          <input type="text" id="username" v-model="username" placeholder="请输入用户名" required />
        </div>

        <div class="input-group">
          <label for="password">密码</label>
          <input type="password" id="password" v-model="password" placeholder="请输入密码" required />
        </div>

        <!-- 仅在注册时显示确认密码字段 -->
        <div v-if="!isLogin" class="input-group">
          <label for="confirmPassword">确认密码</label>
          <input type="password" id="confirmPassword" v-model="confirmPassword" placeholder="请确认密码" required />
        </div>

        <button type="submit" class="submit-btn">{{ isLogin ? '登录' : '注册' }}</button>

        <div class="toggle-link">
          <span>{{ isLogin ? '没有账户?' : '已有账户?' }}</span>
          <button type="button" @click="toggleForm">{{ isLogin ? '注册' : '登录' }}</button>
        </div>
        <span style="font-size: 15px;color: #BFBFBF">默认用户名：admin1   密码：123</span>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { useStore } from '@/store/index.js';  // 引入 Pinia 存储（你可以使用 Vuex，如果使用 Vuex的话替换掉）

export default {
  data() {
    return {
      isLogin: true, // 默认显示登录表单
      username: '',
      password: '',
      confirmPassword: '',
    };
  },
  methods: {
    async handleSubmit() {
      try {
        if (this.isLogin) {
          const response = await axios.post('http://localhost:8080/api/login', {
            username: this.username,
            password: this.password,
          });

          console.log("Full response:", response);

          if (response.data && response.data.token) {
            const token = response.data.token;
            console.log("Received Token:", token); // 打印 Token

            const store = useStore();
            await store.setToken(token); // 确保 setToken 完成

            console.log("Current token in Pinia:", store.token);

            this.$router.push({ name: 'View' });
          } else {
            console.error("Token not found in response:", response.data);
            alert("登录失败，请检查用户名和密码");
          }
        } else {
          // 注册逻辑
          if (this.password !== this.confirmPassword) {
            alert('密码和确认密码不一致，请重新输入！');
            return;
          }

          const response = await axios.post('http://localhost:8080/api/register', {
            username: this.username,
            password: this.password,
          });

          if (response.status === 200) {
            alert('注册成功！请登录');
            this.toggleForm();
          } else {
            alert('注册失败，请稍后重试');
          }
        }
      } catch (error) {
        console.error('请求错误', error);
        if (error.response) {
          console.error("Response data:", error.response.data);
          console.error("Response status:", error.response.status);
        }
        alert('发生了错误，请稍后再试！');
      }
    },
    // 切换登录/注册表单
    toggleForm() {
      this.isLogin = !this.isLogin;
      this.confirmPassword = ''; // 清空确认密码字段
    },
  },
};
</script>

<style scoped>
/* 页面背景 */
body {
  background-color: #0a1929; /* 深色背景 */
  color: #fff;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* 用 flexbox 实现居中 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column; /* 让大标题和登录框垂直排列 */
}

/* 大标题样式 */
.main-title {
  font-size: 50px;
  color: #2990ff;
  text-align: center;
  margin-bottom: 40px; /* 添加标题与登录框之间的间距 */
  font-weight: bold;
}

/* 登录/注册框样式 */
.card {
  background-color: #1e2a37;
  padding: 30px;
  width: 400px;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3), 0px 10px 30px rgba(0, 0, 50, 0.1);
  border: 2px solid #003366; /* 深蓝色边框 */
}

/* 标题样式 */
.title {
  color: #2990ff; /* 科技蓝色 */
  font-size: 25px;
  text-align: center;
  margin-bottom: 20px;
}

/* 输入框样式 */
.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  color: #bbb;
}

.input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #003366; /* 深蓝色边框 */
  border-radius: 5px;
  background-color: #2e3c49;
  color: #fff;
  font-size: 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 聚焦时改变边框颜色和阴影 */
.input-group input:focus {
  border-color: #2886ea;
  outline: none;
  box-shadow: 0px 0px 8px rgb(123, 172, 243); /* 科技蓝色聚焦阴影 */
}

/* 提交按钮样式 */
.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #2990ff; /* 科技蓝 */
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.submit-btn:hover {
  background-color: #008c99;
}

/* 切换登录注册链接样式 */
.toggle-link {
  text-align: center;
  margin-top: 20px;
}

.toggle-link span {
  color: #bbb;
}

.toggle-link button {
  background: none;
  border: none;
  color: #2990ff;
  cursor: pointer;
}
</style>
